<template>
  <div @click="switchNav()" class="nav-btn" :class="{ close: isClose }"></div>
  <ul>
    <li
      v-for="(item, i) in historyRoutes"
      :key="i"
      :class="{ active: item.path == $route.path }"
    >
      <div :title="item.name" @click="$router.push(item.path)">
        {{ item.name }}
      </div>
      <svg
        v-show="historyRoutes.length !== 1"
        @click="closeView(item, i)"
        data-icon="close"
        width="1em"
        height="1em"
        fill="currentColor"
        aria-hidden="true"
        viewBox="64 64 896 896"
        focusable="false"
      >
        <path
          d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
        ></path>
      </svg>
    </li>
  </ul>
</template>

<script>
import { reactive, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
export default {
  emits: ["hidden"],
  setup(_, { emit }) {
    const isClose = ref(false);
    const switchNav = () => {
      isClose.value = !isClose.value;
      emit("hidden");
    };
    const route = useRoute();
    const router = useRouter();
    const historyRoutes = reactive([
      { name: route.name || route.query.name, path: route.path },
    ]);
    watch(
      () => route.path,
      (newVal) => {
        let isHave = false;
        historyRoutes.forEach((item) => {
          if (item.path === newVal) {
            isHave = true;
          }
        });
        const name = route.name || route.query.name;
        if (!isHave) {
          if (historyRoutes.length < 3) {
            historyRoutes.push({ name: name, path: newVal });
          } else {
            historyRoutes.shift();
            historyRoutes.push({ name: name, path: route.path });
          }
        }
      }
    );
    const closeView = (item, i) => {
      if (item.name === route.name) {
        const targetIndex = i === 0 ? 1 : i - 1;
        router.push(historyRoutes[targetIndex].path);
      }
      historyRoutes.splice(i, 1);
    };
    return {
      isClose,
      switchNav,
      historyRoutes,
      closeView,
    };
  },
};
</script>

<style lang="scss" scoped>
.nav-btn {
  cursor: pointer;
  min-width: 30px;
  height: 100%;
  background: url("../assets/imgs/nav-close.svg") no-repeat center;
  background-size: 30px 26px;
}
.close {
  background: url("../assets/imgs/nav-open.svg") no-repeat center;
  background-size: 30px 26px;
}
ul {
  width: 100%;
  height: 100%;
  margin-left: 0.4em;
  padding-left: 0.6em;
  color: var(--head-fg);
  display: flex;
  align-items: center;
  border-left: 1px solid rgb(190, 188, 188);
  overflow: auto;
  li {
    font-size: 0.8rem;
    max-width: 20%;
    overflow-x: hidden;
    box-shadow: 0 0 2px rgb(100, 100, 100);
    display: flex;
    align-items: center;
    height: 30px;
    padding: 0 0.8em;
    animation: fade 1s;
    transition: 0.7s;
    div {
      min-width: 5em;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      cursor: pointer;
      transition: 0.2s;
      &:hover {
        color: var(--head-active-color);
      }
    }
    svg {
      width: 14px;
      min-width: 14px;
      cursor: pointer;
      margin-left: 1em;
      transition: 0.2s;
      &:hover {
        color: var(--head-active-color);
      }
    }
  }
  .active {
    color: var(--head-active-color);
    border: 1px solid var(--head-active-color);
    box-shadow: none;
  }
  li + li {
    margin-left: 0.8em;
  }
}
@media screen and (max-width: 620px) {
  ul {
    li {
      min-width: 8em;
    }
  }
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
</style>